import React, {Component} from 'react';
import Ecarts from 'echarts-for-react'
import  './css/catetype.styl'
import Cloude from './components/cluode'
import axios from 'axios'
import {getUrl} from './mixin'

const Title =(props)=>({
    render(){
      return(
        <div className="tite">
          <div>{props.title}</div>
          <div>{props.en}</div>
        </div>
      )
    }
})

var toThousands=(num)=> {
  var result = [ ], counter = 0;
  num = (num || 0).toString().split('');
  for (var i = num.length - 1; i >= 0; i--) {
      counter++;
      result.unshift(num[i]);
      if (!(counter % 3) && i !== 0) { result.unshift(','); }
  }
  return result.join('');
}
class PieEcart extends Component{
  constructor(props){
    super(props);
    this.state={
        option:this.getOption([],0),
        numer:0,
        info:'',
        hotcluode:[],
        id:null
    }
  }
  componentWillMount(){
    this.setState({
      id:getUrl()
    })
  }

  componentDidMount(){
      const Id=this.state.id;
      axios.get('/api/visualData/dataClassification?id='+Id).then((res)=>{
        const total=res.data.total
        console.log(res.data.data)
        var  arr=[];
        let obj;
        if(res.data.data){
          res.data.data.map((item,index)=>{
            obj={}
            obj.value=item.doc_count;
            obj.name=this._typerender(item.webSiteType);
            obj.type=item.per;
            arr.push(obj)
            return arr
          })
        }
        this.setState({
          option:this.getOption(
              arr,total.toString()
          )
      })
      //console.log(this.)
    })
    axios.get('/api/visualData/queryTopicIntroduction?id='+Id).then(res=>{
      const totalSum=res.data.total;
      const Info=res.data.data;
      this.setState({
        numer:toThousands(totalSum),
        info:Info
      })
    })
  }

  //0：新闻 1：论坛 2：微博 3：平面媒体 5：博客 6：贴吧 9：twitter 10：微信 11：招标 12：手机APP 13：笑话
  _typerender(type){
    var data;
      switch (type) {
        case '0':
        data="新闻";
        break;
        case '1':
        data="论坛";
        break;
        case '2':
        data="微博";
        break;
        case '3':
        data="平面媒体";
        break;
        case '5':
        data="博客";
        break;
        case '6':
        data="贴吧";
        break;
        case '9':
        data="twitter";
        break;
        case '10':
        data="微信";
        break;
        case '11':
        data="招标";
        break;
        case '12':
        data="手机APP";
        break;
        case '13':
        data="笑话";
        break;
        default:
        data="其它"
      }

      return data

  }
  _ztrender(){
    return (
      <div className="ztInfo">
        <div className="ztTitle">舆情数量</div>
        <div className="ztNum">{this.state.numer}</div>
        <div className="info">{this.state.info}</div>
      </div>
    ) 
  }

  getOption(data,total){
  var data1=data;
    const option = {
      tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          show:false
      },
      tite:{
        subtext :'所占百分比（%）',
      },
      color:['#0b50c3', '#b02525','#0eab76','#707380','#b04c25'],
      legend: {
        orient: 'vertical',
        itemWidth:11,
        itemHeight:11,
        borderRadius:0,
        textStyle: {
          fontSize: 12,
          color: '#F1F1F3'
        },
        left:160,
        data:data1,
        formatter:function(name){
          var index = 0;
          data1.forEach(function(value,i){
            if(value.name===name){
                index=i
            } 
          })
          return  '     ' + data1[index].name + '    ' + data1[index].value + '     ' + data1[index].type
        }
      },
      graphic:{
        type:'text',
        left:'center',
        top:'center',
        style:{
          text:'Part1\n ',
          textAlign:'center',
          fill:'#000',
          width:30,
          height:30
        }
      },
      series: [
          {
              name:'访问来源',
              type:'pie',
              hoverAnimation:false,
              radius: ['50%', '70%'],
              center :['20%', '40%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                    show: true,
                    position: 'center',
                    color: '#ffffff', 
                    fontSize:14,
                    formatter: total,

                },
              },

              labelLine: {
                  normal: {
                      show: false
                  }
              },
              data:data1
          }
      ]
  };
    return option
  }

  render(){
    const data=this.state.option
    return(
      <div>
        <Title title="专题简介" en="THEMATIC PROFILE"></Title>
        <div className="zt">
          {this._ztrender()}
        </div>
        <Title title="数据分类" en="DATA CLASSIFICATION"></Title>
        <div className="lf">
          <Ecarts option={data}  style={{height: 130,width:400}} notMerge={true} lazyUpdate={true} ></Ecarts>
        </div>
        <Title title="热门事件词云" en="HOT WORD CLOUD"></Title>
        <Cloude></Cloude>
      </div>
    )
  }
}
export default PieEcart